<script setup>
import Highcharts from 'highcharts'
import { onMounted } from 'vue'
import {
  createData,
  createTime
} from '../util/util'

let count = 47

let chartData = {
  categories: [],
  tradingDay: [],
  data: []
}

const createCarts = () => {
  var chart = Highcharts.chart('container', {
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    credits:{
      enabled:false
    },
    title: {
      text: '',
    },
    subtitle: {
      text: ''
    },
    xAxis: {
      categories: chartData.tradingDay,
      tickInterval: chartData.tradingDay ? chartData.tradingDay.length-1 : 0,
      title: {
        enabled: false,
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        enabled: false,
      }
    },
    legend: {
      enabled: true,
      layout: 'horizontal',
      align: 'left',
      verticalAlign: 'top',
      // x: 100,
      // y: 70,
      // floating: true,
      // backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
      // borderWidth: 1
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} , {point.y}%'
        }
      }
    },
    series: [
      {
        name: '股息率',
        color: 'blue',
        type: 'line',
        data: chartData.data,
        marker: {
          enabled: false
        }
      },
      {
        name: '除权除息日',
        color: 'rgba(223, 83, 83, .5)',
        data: chartData.scatter,
        marker: {
          enabled: true,
          symbol: 'circle',
          fillColor: '#EB8A55'
        }
      },
    ]
  })
}
onMounted(() => {
  const {
    timeStamp,
    days
  } = createTime(count)

  // console.log('timeStamp', JSON.stringify(timeStamp))
  // console.log('days', JSON.stringify(days))

  const yArr = createData(count)
  // console.log('yArr', JSON.stringify(yArr))

  chartData.tradingDay = days
  chartData.data = yArr

  const scatter = []
  for (let i = 0; i < 10; i++) {
    let point = []
    point.push(chartData.tradingDay[i])
    point.push(chartData.data[i])
    scatter.push(point)
  }
  // console.log('scatter',JSON.stringify(scatter))
  chartData.scatter = scatter

  // chartData.scatter.forEach(item=>{
  //   const x = chartData.tradingDay.findIndex(d=>d === item[0])
  //   const y = chartData.data.findIndex(d=>d === item[1])
  //   console.log(x,y)
  // })

  console.log('l',chartData)

  createCarts()
})

</script>

<template>
  <div class="highChartScatter">
    <div id="container" style="width:800px;height:400px"></div>
  </div>
</template>

<style scoped lang="scss">
.highChartScatter{
  display: flex;
  justify-content: center;
}
</style>
